<template>
    <el-container class="app-container">
        <el-aside width="200px" class="app-aside">
            <ul class="app-sidebar">
              <li v-for="(item, index) in sidebarList" :key="index" @click="addItem(index, item)">
                <span>{{item.endName}}</span>
              </li>
            </ul>
        </el-aside>
        <el-main class="app-main">
              <div class="drag-box">
                <div class="my-box">
                  <div class="my-box-header"></div>
                  <div class="my-box-body"></div>
                  <template v-for="(element, index) in componentList">
                    <VueDragResize :w="64" :h="20" :minw="5" :minh="5" :x="element.x" :y="element.y" :key="index" :parentLimitation="true" v-on:dragging="onDrag" @clicked="onActivated(index,element)">
                      <span v-if='element.type== "text"' v-bind:style="{fontSize: element.fontSize+'px', color: element.color, 'font-family': element.fontFamily, 'text-decoration': element.textDecoration}">{{element.frontName!=''?element.frontName+':':''}}{{element.endName}}</span>
                      <div v-else :style="{background: 'url('+element.src+')  no-repeat', 'background-size': 'contain'}" style="width: 100%;height: 100%;">&nbsp;</div>
                    </VueDragResize >
                  </template>
                </div>
              </div>

              <div class="shuxing-box">
                <h3>组件信息</h3>
                <p>{{activeComponent.name}}</p>
                <form action="">
                  <div class="input-group">
                    x:
                    <el-input-number size="small" v-model.number="activeComponent.x" :min="0" :max="1000"></el-input-number>
                    y: 
                    <el-input-number size="small" v-model.number="activeComponent.y" :min="0" :max="1000"></el-input-number>
                    <span v-if="activeComponent.type!='img'">
                      文字大小：
                      <el-select size="small" v-model="activeComponent.fontSize" placeholder="" style="width: 100px;" >
                        <el-option label="12" value="12"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="32" value="32"></el-option>
                      </el-select>
                      下划线：
                      <el-switch
                        v-model="activeComponent.textDecoration"
                        active-color="#13ce66"
                        inactive-color="#aeaeae"
                        active-value="underline"
                        inactive-value="none">
                      </el-switch>
                    </span>
                  </div>
                  <div class="input-group" v-if="activeComponent.type!='img'">
                    文字风格：
                    <el-select size="small" v-model="activeComponent.fontFamily" placeholder="请选择" style="width: 100px;">
                      <el-option
                        v-for="(item, index) in fontFamilyList"
                        :key="index"
                        :label="item.show"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    文字颜色：
                    <el-select size="small" v-model="activeComponent.color" placeholder="请选择" style="width: 100px;" >
                      <el-option label="黑色" value="#000"></el-option>
                      <el-option label="白色" value="#fff"></el-option>
                    </el-select>
                    前缀文字： <el-input size="small" v-model="activeComponent.frontName" placeholder="请输入内容" style="width: 150px;"></el-input>
                    后缀文字： <el-input size="small" v-model="activeComponent.endName" placeholder="请输入内容" style="width: 150px;"></el-input>
                  </div>
                  <div class="input-group">
                    <el-button size="small" @click="submitForm">保存</el-button>
                    <el-button size="small" @click="resetItem">重置</el-button>
                    <el-button size="small" @click="removeItem">删除</el-button>
                  </div>
                </form>
              </div>
        </el-main>
    </el-container>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import VueDragResize from 'vue-drag-resize'
import axios from 'axios'

export default {
  name: 'home',
  components: {
    HelloWorld,
    VueDragResize
  },
  created(){
    this.templateId = this.$route.query.templateId;//模板id
    console.log(this.$route.query.templateId);
    this.queryTemplate();
  },
  data() {
    return {
      templateId: 0,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      componentList: [
      ],
      sidebarList: [
        {'endName':'名称', name:'name'},
        {'endName':'价格', name: 'price'},
        {'endName':'促销价', name: 'salePrice'},
        {'endName':'产地', name: 'address'},
        {'endName':'品牌', name: 'brand'},
        {'endName':'单位', name: 'company'},
        {'endName':'库存', name: 'stock'},
        {'endName':'附加信息1', name: 'additional'},
        {'endName':'附加信息2', name: 'addition'},
        {'endName':'条形码', name: 'barCode', src:'/img/barcode.png'},
        {'endName':'二维码', name: 'qrCode', src:'/img/qrcode.png'},
      ],
      fontFamilyList: [
        {value: '微软雅黑', 'show': '微软雅黑'},
        {value: '华文楷体', 'show': '华文楷体'},
        {value: '黑体', 'show': '黑体'},
        {value: '宋体', 'show': '宋体'},
      ],
      activeIndex: null,
      activeComponent: {}
    }
  },
  methods: {
    // onResize: function (x, y, width, height) {
    //   this.x = x
    //   this.y = y
    //   this.width = width
    //   this.height = height
    // },
    pressUp: function(){
      console.log('hello');
    },
    onActivated: function(index, item) {
      this.activeIndex = index;
      this.activeComponent = item;
    },
    onDrag: function (obj) {
      this.activeComponent.x = obj.left
      this.activeComponent.y = obj.top
    },
    addItem(index, item) {
      var isExist = false;
      for(var i = 0; i<this.componentList.length; i++) {
        if(this.componentList[i].name == item.name){
          isExist = true;
          break;
        }
      }
      if(isExist){
        this.$message({
          message: '该组件已存在',
          type: 'warning'
        });
      }else{
        var type = 'text';
        if(item.name == 'barCode' || item.name == 'qrCode') {
          type = 'img';
        }
        this.componentList.push({'endName': item.endName, name: item.name, frontName:'', x:0, y:0, fontSize: 16, color: '#000', fontFamily: '微软雅黑', textDecoration: 'none', type: type, src: item.src});
      }
    },
    removeItem() {
      if(this.activeIndex !== null) {
        this.componentList.splice(this.activeIndex, 1)
      }
    },
    resetItem() {
      this.componentList[this.activeIndex].x = 0;
      this.componentList[this.activeIndex].y = 0;
      this.componentList[this.activeIndex].fontSize = 16;
      this.componentList[this.activeIndex].color = '#000';
      this.componentList[this.activeIndex].fontFamily = '微软雅黑';
      this.componentList[this.activeIndex].frontName = '';
      this.componentList[this.activeIndex].textDecoration = 'none';
    },
    queryTemplate(){
      var that = this;
      // 查询模板

      axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/esl/tempDetail/queryByTempId.do',
        params: {
          templateId: this.templateId
        }
      }).then(res => {
        console.log(res)
        var data = res.data.data;
        if(data){
          var tmp = ['name','price','salePrice','address','brand','company','stock','additional','addition'];
          for(var i=0;i<tmp.length;i++){
            if(data[tmp[i]+'X'] != undefined){
              that.componentList.push({
                endName: data[tmp[i]+'Post'], 
                name: tmp[i], 
                frontName:data[tmp[i]+'Pre'], 
                x:data[tmp[i]+'X'], 
                y:data[tmp[i]+'Y'], 
                fontSize: data[tmp[i]+'FontSize'], 
                color: data[tmp[i]+'FontColor'], 
                fontFamily: data[tmp[i]+'FontStyle'], 
                textDecoration: 'none', 
                type: 'text'
              });
            }
          }

          var tmp2 = ['barCode','qrCode'];
          for(var j=0;j<tmp2.length;j++){
            if(data[tmp2[j]+'X'] != undefined){
              that.componentList.push({ 
                name: tmp2[j], 
                x:data[tmp2[j]+'X'], 
                y:data[tmp2[j]+'Y'], 
                type: 'img',
                src: '/img/' + tmp2[j].toLowerCase() + '.png'
              });
            }
          }

        }

      }).catch(err => {
        console.log('error')
      });
    },
    submitForm() {
      // 保存模板
      var postData = {
        templateId: this.templateId
      };

      //准备请求数据
      var tmp = ['name','price','salePrice','address','brand','company','stock','additional','addition'];
      for(var k in this.componentList){
        if(['qrCode','barCode'].indexOf(this.componentList[k]['name']) >= 0){
          postData[this.componentList[k]['name']+'X'] = this.componentList[k].x;
          postData[this.componentList[k]['name']+'Y'] = this.componentList[k].y;
        }else if(tmp.indexOf(this.componentList[k]['name']) >= 0){
          postData[this.componentList[k]['name']+'X'] = this.componentList[k].x;
          postData[this.componentList[k]['name']+'Y'] = this.componentList[k].y;
          postData[this.componentList[k]['name']+'Post'] = this.componentList[k].endName;
          postData[this.componentList[k]['name']+'Pre'] = this.componentList[k].frontName;
          postData[this.componentList[k]['name']+'FontSize'] = this.componentList[k].fontSize;
          postData[this.componentList[k]['name']+'FontColor'] = this.componentList[k].color;
          postData[this.componentList[k]['name']+'FontStyle'] = this.componentList[k].fontFamily;
        }
      }
      
      //发送请求
      axios({
        method: 'post',
        url: 'http://127.0.0.1:8080/esl/tempDetail/update.do',
        data: postData
      }).then(res => {
        this.$message({
          message: '提交保存成功',
          type: 'success'
        });
      }).catch(err => {
        console.log('error')
      });
    },
  }
}
</script>

<style lang="less">
.app-container{
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width: 100%;
    .app-aside{
        background-color: #545c64;
    }
    .app-sidebar{
      list-style: none;
      margin: 0;
      padding: 0;
      color: #fff;
      text-align: center;
      li{
        line-height: 50px;
      }
      li:hover{
        color: yellow;
        cursor: pointer;
        background-color: #606971;
      }
    }
    .app-main{
        padding: 0;
        background-color: #c0c4cc;
    }
}
.app-main{
    display: block;
    width: 100%; 
    // border: 1px solid red;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    .drag-box{
      flex-grow: 1;
    }
    .my-box{
      width: 300px;
      height: 140px;
      position: absolute;
      background-color: #fff;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -70px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      text-align: left;
      .my-box-header{
        height: 30px;
        background-color: #606266;
        text-align: center;
        color: #fff;
        line-height: 30px;
      }
      .my-box-body{
        flex-grow: 1;
        position: relative;
        text-align: left;
      }
    }
    .shuxing-box{
      min-height: 210px;
      background-color: #fff;
      width: 98%;
      margin: 0 auto 30px;
      form{
        .input-group{
          margin: 10px 0;
        }
      }
    }
}
</style>

<style lang="less" scoped>
    .el-menu{
        border-right: 0;
    }
</style>

